﻿<h4>Horizontal</h4>
<FluentTabs ActiveTabId="tab-2" >
    <div slot="start">
        <FluentButton>1</FluentButton>
        <FluentButton>2</FluentButton>
        <FluentButton>3</FluentButton>
    </div>
    <div slot="end">
        <FluentButton>1</FluentButton>
        <FluentButton>2</FluentButton>
        <FluentButton>3</FluentButton>
    </div>
    <FluentTab Id="tab-1" Label="Tab one">
    Tab one content. This is for testing.
    </FluentTab>
    <FluentTab Id="tab-2" Label="Tab two">
        Tab two content. This is for testing.
    </FluentTab>
    <FluentTab Id="tab-3" Label="Tab three">
        Tab three content. This is for testing.
    </FluentTab>
</FluentTabs>

<h4>Vertical</h4>
<FluentTabs Orientation="Orientation.Vertical" ActiveTabId="tab-v3">
    <div slot="start">
        <FluentButton>1</FluentButton>
        <FluentButton>2</FluentButton>
        <FluentButton>3</FluentButton>
    </div>
    <div slot="end">
        <FluentButton>1</FluentButton>
        <FluentButton>2</FluentButton>
        <FluentButton>3</FluentButton>
    </div>
    <FluentTab Id="tab-v1" Label="Tab one">
        Tab one content. This is for testing.
    </FluentTab>
    <FluentTab Id="tab-v2" Label="Tab two">
        Tab two content. This is for testing.
    </FluentTab>
    <FluentTab Id="tab-v3" Label="Tab three">
        Tab three content. This is for testing.
    </FluentTab>
</FluentTabs>
